

<style>
    .box {
        width: 100%;
        height: 100%;
        perspective: 500px;
    }

    .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        color: #ff92ff;
        font-size: 36px;
        font-weight: 100;
        text-align: center;
        line-height: 200px;
        transform-style: preserve-3d;
        transform: rotateY(180deg);
    /*animation: move 8s infinite linear;*/
    }

    @keyframes move {
        0% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
        }
    }

    div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 10px solid #66daff;
        border-radius: 20px;
        background-color: rgba(51, 51, 51, 0.3);
    }

    .front {
        transform: translateZ(100px);
    }

    .back {
        transform: translateZ(-100px) rotateY(180deg);
    }

    .left {
        transform: translateX(-100px) rotateY(-90deg);
    }

    .right {
        transform: translateX(100px) rotateY(90deg);
    }

    .top {
        transform: translateY(-100px) rotateX(90deg);
    }

    .bottom {
        transform: translateY(100px) rotateX(-90deg);
    }
</style>

<body>

<div class="box">
    <section class="cube">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="left">3</div>
        <div class="right">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </section>
</div>
</body>